<template>
  <el-card class="box-card" style="height: 100%;">
    <div slot="header">
      <span>项目列表</span>
    </div>
    <el-scrollbar class="project-list-scroll">
      <el-menu class="side-project-list">
        <el-menu-item v-for="(item,index) in projectData" :key="index" :index="(index + 1).toString()"
          @click="selectProject(item)">
          <span slot="title">
            <el-tag type="primary" v-if="item.status == 0">未开审</el-tag>
            <el-tag type="success" v-else-if="item.status == 1">评审中</el-tag>
            <el-tag type="warning" v-else-if="item.status == 2">已初审</el-tag>
            <el-tag type="warning" v-else-if="item.status == 3">已评分</el-tag>
            <el-tag type="danger" v-else>已结束</el-tag>
            <span style="margin-left: 10px;">{{item.name}}</span>
          </span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </el-card>
</template>

<script>
  // import {
  //   getProject
  // } from "@/api/project"
  export default {
    data() {
      return {
        pageInfo: {
          pageSize: -1,
          currentPage: 1
        },
        projectData: []
      }
    },
    mounted() {
      this.getProjectData()
    },
    methods: {
      selectProject(data){
        this.$bus.$emit('selectProject', data)
        this.$bus.$emit("onSelectProject", data);
      },
      getProjectData() {
        this.pageInfo.orderway = " status desc, date asc ";
        // getProject(this.pageInfo).then(res => {
        //   this.projectData = res.data.rows
        // })
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .el-menu {
    border-right: none;
  }

  .project-list-scroll {
    height: 100%;
    padding-bottom: 50px;
  }

  ::v-deep .el-card__body {
    height: 100%;
    padding-right: 0;
  }

  .el-menu-item.is-active{
    background-color: rgba(198,226,255,.5);
  }
  .el-menu-item.is-disabled{
    opacity: .5;
  }
</style>

<style lang="scss">
  .el-scrollbar__wrap {
    overflow-x: hidden;
    margin-bottom: 0!important;
  }
</style>
